<template>
  <div>
    <Vheader title="填写资料"></Vheader>
    <scroll class="v-wrapper">
      <div class="v-container">
        <div class="input-box">
          <label class="input-info"><i class="iconfont icon-dianpu color-dianpu"></i></label>
          <input type="text" class="input" placeholder="请输入店铺名称">
        </div>
        <div class="input-box">
          <label class="input-info"><i class="iconfont icon-hangye color-hangye"></i></label>
          <input type="text" class="input" placeholder="请选择所属行业" readonly>
          <div class="right"><i class="iconfont icon-right"></i></div>
        </div>
        <div class="input-box">
          <label class="input-info"><i class="iconfont icon-dizhi color-dizhi"></i></label>
          <input type="text" class="input" placeholder="请选择地址" readonly>
          <div class="right"><i class="iconfont icon-right"></i></div>
        </div>
        <div class="input-box">
          <input type="text" class="only-input" placeholder="请输入详细地址">
        </div>
        <div class="input-box">
          <label class="input-info"><i class="iconfont icon-jingwei color-jingwei"></i></label>
          <input type="text" class="input" placeholder="获取经纬度以便更容易找到你的店铺" readonly>
          <div class="right"><i class="iconfont icon-right"></i></div>
        </div>
        <div class="input-box">
          <label class="input-info"><i class="iconfont icon-user color-user"></i></label>
          <input type="text" class="input" placeholder="请输入联系人姓名">
        </div>
        <div class="input-box">
          <label class="input-info"><i class="iconfont icon-zhanghu color-zhanghu"></i></label>
          <input type="text" class="input" placeholder="请输入支付宝收款账户">
        </div>
        <div class="input-box">
          <label class="input-info"><i class="iconfont icon-mobile color-lianxi"></i></label>
          <input type="text" class="input" placeholder="请输入联系人电话">
        </div>
        <div class="input-box">
          <label class="input-info"><i class="iconfont icon-yanzheng color-yanzheng"></i></label>
          <input type="text" class="input" v-model="mobile" placeholder="请输入验证码">
          <btnTime @getCode="send" :disabled="disabled" ref="btn" :second="60" :tel="mobile"></btnTime>
        </div>
        <div class="upload-paperwork">
          <div class="paperwork-title">请上传法人身份证及营业执照</div>
          <p class="upload-paperwork-title">身份证</p>
          <div class="upload-idcard">
            <div class="upload-idcard-section">
              <input type="file">
              <div class="img-preview">
                <img src="../../common/images/preview.png" alt="">
              </div>
            </div>
            <div class="upload-idcard-section">
              <input type="file">
              <div class="img-preview">
                <img src="../../common/images/preview.png" alt="">
              </div>
            </div>
          </div>
          <p class="upload-paperwork-title">营业执照</p>
          <div class="upload-license">
            <input type="file">
            <div class="img-preview">
              <img src="../../common/images/preview.png" alt="">
            </div>
          </div>
          <p class="upload-paperwork-title">店铺logo</p>
          <div class="upload-logo">
            <input type="file">
            <div class="img-preview">
              <img src="../../common/images/preview.png" alt="">
            </div>
          </div>
        </div>
        <mt-button @click.native="updatePass" type="primary" class="exit">提交</mt-button>
      </div>
    </scroll>
  </div>
</template>

<script type="text/ecmascript-6">
  import Vheader from '../../components/header.vue';
  import scroll from '../../components/scroll.vue';
  import btnTime from '../../components/btnTimer.vue';
  export default {
    data() {
      return {
        disabled: false,
        mobile: '',
        code: ''
      };
    },
    created() {

    },
    mounted() {

    },
    methods: {
      send: function () {
        this.disabled = true;
        setTimeout(this.sended, 2000);
      },
      sended() {
        this.$refs.btn.getCode();
        this.disabled = false;
      }
    },
    components: {Vheader,scroll,btnTime}
  };
</script>

<style type="text/scss" lang="scss">
  @import "../../common/style/public";
  .color-dianpu{
    color: #c76e34;
  }
  .color-hangye{
    color: #0096d0;
  }
  .color-dizhi{
    color: #c8bd5b;
  }
  .color-jingwei{
    color: #1c62a4;
  }
  .color-user{
    color: #c46111;
  }
  .color-zhanghu{
    color: #f7a403;
  }
  .color-lianxi{
    color: #d4027d;
  }
  .color-yanzheng{
    color: #86bb74;
  }
  .upload-paperwork{
    width: 100%;
    margin-top: 5px;
    .paperwork-title,.upload-paperwork-title{
      width:100%;
      background-color: #FFFFFF;
      line-height: 45px;
    }
    .paperwork-title{
      margin-bottom: 1px;
      text-align: center;
    }
    .upload-paperwork-title{
      padding: 0 15px;
      box-sizing: border-box;
    }
    .upload-idcard{
      width: 100%;
      padding: 0 15px;
      box-sizing: border-box;
      display: flex;
      background-color: #FFFFFF;
      .upload-idcard-section{
        width: calc((100% - 15px) / 2);
        height: 120px;
        position: relative;
        input[type="file"]{
          display: block;
          width: 100%;
          height: 100%;
          position: absolute;
          top:0;
          z-index: 3;
          opacity: 0;
        }
        .img-preview{
          width: 100%;
          height: 120px;
          position: absolute;
          top:0;
          img{
            width: 100%;
            height: 100%;
          }
        }
      }
      .upload-idcard-section:first-child{
        margin-right: 15px;
      }
    }
    .upload-license{
      width: 100%;
      height: 240px;
      /*margin: auto;*/
      position: relative;
      background-color: #FFFFFF;
      box-sizing: border-box;
      input[type="file"]{
        display: block;
        width: 80%;
        height: 240px;
        position: absolute;
        top:0;
        left: 10%;
        z-index: 3;
        opacity: 0;
      }
      .img-preview{
        width: 80%;
        height: 240px;
        position: absolute;
        top:0;
        left: 10%;
        img{
          width: 100%;
          height: 100%;
        }
      }
    }
    .upload-logo{
      width:100%;
      height: 100px;
      position: relative;
      background-color: #FFFFFF;
      input[type="file"]{
        display: block;
        width: 64px;
        height: 64px;
        border-radius: 100%;
        position: absolute;
        top:15px;
        left: calc((100% - 64px) / 2);
        z-index: 3;
        opacity: 0;
      }
      .img-preview{
        width: 64px;
        height: 64px;
        position: absolute;
        top:15px;
        left: calc((100% - 64px) / 2);
        img{
          width: 100%;
          height: 100%;
          border-radius: 100%;
        }
      }
    }
  }

</style>
